<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>列表页</title>
    <%
        String path = request.getContextPath();
        String baseUrlPath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
    %>
    <script type="text/javascript" src="<%=baseUrlPath%>/js/jquery.min.js"></script>
    <script type="text/javascript" src="<%=baseUrlPath%>/js/sample.js"></script>
    <script>
        function del(id) {
            $.ajax({
                url: '<%=baseUrlPath%>/resume/delete?id='+id,
                type: 'POST',
                dataType: 'json',
                success: function (data) {
                    query();
                }
            })
        }

        function query() {
            $.ajax({
                url: '<%=baseUrlPath%>/resume/findAll',
                type: 'POST',
                dataType: 'json',
                success: function (data) {
                    var table = '<table border="1"><tr><th>编号</th><th>姓名</th><th>地址</th><th>电话</th><th>操作</th></tr>';
                    var json = eval(data);
                    $.each(json, function (index, item) {
                        var id = json[index].id;
                        var name = json[index].name;
                        var address = json[index].address;
                        var phone = json[index].phone;
                        table += '<tr><td class="tdid">' + id + '</td><td class="tdname">' + name + '</td><td class="tdaddress">' + address + '</td><td class="tdphone">' + phone + '</td><td><a href="javascript:del(' + id + ')">删除</a><input type="button" class="modifyBtn0" value="修改"/></td></tr>'
                    });
                    table += '</table>';
                    $("#tablediv").html(table);
                    $(".modifyBtn0").click(function () {
                        var tr = $(this).parent().parent();
                        var id = $(tr).find(".tdid").text();
                        var name = $(tr).find(".tdname").text();
                        var address = $(tr).find(".tdaddress").text();
                        var phone = $(tr).find(".tdphone").text();
                        $("#midspan").text(id);
                        $("#mnametxt").val(name);
                        $("#maddresstxt").val(address);
                        $("#mphonetxt").val(phone);
                    });
                }
            })
        }

        $(function () {
            query();
            $("#addBtn").click(function () {
                $.ajax({
                    url: '<%=baseUrlPath%>/resume/save',
                    type: 'POST',
                    data: '{"name":"' + $("#nametxt").val() + '","address":"' + $("#addresstxt").val() + '","phone":"' + $("#phonetxt").val() + '"}',
                    contentType: 'application/json;charset=utf-8',
                    dataType: 'json',
                    success: function (data) {
                        query();
                    }
                })
            });

            $("#modifyBtn").click(function () {
                var id = $("#midspan").text();
                if (!id) {
                    return;
                }
                $.ajax({
                    url: '<%=baseUrlPath%>/resume/save',
                    type: 'POST',
                    data: '{"id":"' + id + '","name":"' + $("#mnametxt").val() + '","address":"' + $("#maddresstxt").val() + '","phone":"' + $("#mphonetxt").val() + '"}',
                    contentType: 'application/json;charset=utf-8',
                    dataType: 'json',
                    success: function (data) {
                        query();
                    }
                })
            });
        });
    </script>
</head>
<body>
<div id="adddiv">
    <h2>新增区域</h2>
    姓名：<input type="text" name="name" id="nametxt"/>
    地址：<input type="text" name="address" id="addresstxt"/>
    电话：<input type="text" name="phone" id="phonetxt"/>
    <input type="button" id="addBtn" value="新增"/>
</div>
<div id="tablediv">
</div>
<div id="modifydiv">
    <h2>修改区域</h2>
    id：<span id="midspan"></span>
    姓名：<input type="text" name="name" id="mnametxt"/>
    地址：<input type="text" name="address" id="maddresstxt"/>
    电话：<input type="text" name="phone" id="mphonetxt"/>
    <input type="button" id="modifyBtn" value="修改"/>
</div>
</body>
</html>